<template>
  <div id="app">
    <!--<el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>-->

    <!--:ffn="changeName"-->
    <myHeader :headerJD="jd"  :myName="name" @newName="name=$event"></myHeader>
    <myContent></myContent>
    <myFooter></myFooter>
  </div>
</template>

<script>
  import myHeader from './components/MyHeader'
  import myContent from './components/MyContent'
  import myFooter from './components/MyFooter'
  export default {
    name: 'App',
    data(){
      return {
        jd: '京东国际',
        name: 'ange'
      }
    },
    components:{
      /*创建一个对象,并且指定一个对象名称*/
      myHeader :myHeader,
      myContent: myContent,
      myFooter
    },
    beforeCreate () {
      console.log("beforeCreate....")
    },
    created () {
      console.log("created....")
    },
    beforeMount () {
      console.log("beforeMount....")
    },
    mounted () {
      console.log("Mounted....")
    },
    beforeUpdate () {
      console.log("beforeUpdate....")
    },
    updated () {
      console.log("updated....")
    },
    beforeDestroy () {
      console.log("beforeDestroy....")
    },
    destroyed () {
      console.log("destroyed....")
    },
    methods:{
      changeName(name){
        this.name = name;
      }
    }
  }
</script>

<style>
#app {

}
</style>
